Google Git
Sign in
chromium / external / pywebsocket / src / b8361d7f0fca3f6a9d11bfce668dd794d9316e43 / . / example / console.html
blob: b71fc6e2fca99d084d9b2d08f4b79b8bf143923c [file] [log] [blame]
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]1<!--
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]2Copyright 2011, Google Inc.
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]3All rights reserved.
4
5Redistribution and use in source and binary forms, with or without
6modification, are permitted provided that the following conditions are
7met:
8
9 * Redistributions of source code must retain the above copyright
10notice, this list of conditions and the following disclaimer.
11 * Redistributions in binary form must reproduce the above
12copyright notice, this list of conditions and the following disclaimer
13in the documentation and/or other materials provided with the
14distribution.
15 * Neither the name of Google Inc. nor the names of its
16contributors may be used to endorse or promote products derived from
17this software without specific prior written permission.
18
19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
20"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
21LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
22A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
23OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
24SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
25LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
26DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
27THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
28(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30-->
31
32<!--
33A simple console for testing WebSocket server.
34
35Type an address into the top text input and click connect to establish
36WebSocket. Then, type some message into the bottom text input and click send
37to send the message. Received/sent messages and connection state will be shown
38on the middle textarea.
39-->
40
41<html>
42<head>
43<title>WebSocket console</title>
44<script>
45var socket = null;
46
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]47var showTimeStamp = false;
48
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]49var addressBox = null;
50var logBox = null;
51var messageBox = null;
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]52var fileBox = null;
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]53var codeBox = null;
54var reasonBox = null;
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]55
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]56function getTimeStamp() {
57 return new Date().getTime();
58}
59
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]60function addToLog(log) {
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]61 if (showTimeStamp) {
62 logBox.value += '[' + getTimeStamp() + '] ';
63 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]64 logBox.value += log + '\n'
65 // Large enough to keep showing the latest message.
66 logBox.scrollTop = 1000000;
67}
68
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]69function setbinarytype(binaryType) {
70 if (!socket) {
71 addToLog('Not connected');
72 return;
73 }
74
75 socket.binaryType = binaryType;
76 addToLog('Set binaryType to ' + binaryType);
77}
78
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]79function send() {
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]80 if (!socket) {
81 addToLog('Not connected');
82 return;
83 }
84
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]85 socket.send(messageBox.value);
86 addToLog('> ' + messageBox.value);
87 messageBox.value = '';
88}
89
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]90function sendfile() {
91 if (!socket) {
92 addToLog('Not connected');
93 return;
94 }
95
96 var files = fileBox.files;
97
98 if (files.length == 0) {
99 addToLog('File not selected');
100 return;
101 }
102
103 socket.send(files[0]);
104 addToLog('> Send ' + files[0].name);
105}
106
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]107function connect() {
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]108 if ('WebSocket' in window) {
109 socket = new WebSocket(addressBox.value);
110 } else if ('MozWebSocket' in window) {
111 socket = new MozWebSocket(addressBox.value);
112 } else {
113 return;
114 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]115
116 socket.onopen = function () {
117 addToLog('Opened');
118 };
119 socket.onmessage = function (event) {
tyoshino@chromium.org4a98c442012-11-05 10:59:27[diff] [blame]120 if (('ArrayBuffer' in window) && (event.data instanceof ArrayBuffer)) {
121 addToLog('< Received an ArrayBuffer of ' + event.data.byteLength +
122 ' bytes')
123 } else if (('Blob' in window) && (event.data instanceof Blob)) {
124 addToLog('< Received a Blob of ' + event.data.size + ' bytes')
125 } else {
126 addToLog('< ' + event.data);
127 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]128 };
129 socket.onerror = function () {
130 addToLog('Error');
131 };
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]132 socket.onclose = function (event) {
133 var logMessage = 'Closed (';
134 if ((arguments.length == 1) && ('CloseEvent' in window) &&
135 (event instanceof CloseEvent)) {
136 logMessage += 'wasClean = ' + event.wasClean;
137 // code and reason are present only for
138 // draft-ietf-hybi-thewebsocketprotocol-06 and later
139 if ('code' in event) {
140 logMessage += ', code = ' + event.code;
141 }
142 if ('reason' in event) {
143 logMessage += ', reason = ' + event.reason;
144 }
145 } else {
146 logMessage += 'CloseEvent is not available';
147 }
148 addToLog(logMessage + ')');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]149 };
150
151 addToLog('Connect ' + addressBox.value);
152}
153
tyoshino@chromium.org28e12002010-12-24 09:40:48[diff] [blame]154function closeSocket() {
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]155 if (!socket) {
156 addToLog('Not connected');
157 return;
158 }
159
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]160 if (codeBox.value || reasonBox.value) {
161 socket.close(codeBox.value, reasonBox.value);
162 } else {
163 socket.close();
164 }
tyoshino@chromium.org28e12002010-12-24 09:40:48[diff] [blame]165}
166
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]167function printState() {
168 if (!socket) {
169 addToLog('Not connected');
170 return;
171 }
172
173 addToLog(
174 'url = ' + socket.url +
175 ', readyState = ' + socket.readyState +
176 ', bufferedAmount = ' + socket.bufferedAmount);
177}
178
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]179function init() {
180 var scheme = window.location.protocol == 'https:' ? 'wss://' : 'ws://';
181 var defaultAddress = scheme + window.location.host + '/echo';
182
183 addressBox = document.getElementById('address');
184 logBox = document.getElementById('log');
185 messageBox = document.getElementById('message');
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]186 fileBox = document.getElementById('file');
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]187 codeBox = document.getElementById('code');
188 reasonBox = document.getElementById('reason');
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]189
190 addressBox.value = defaultAddress;
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]191
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]192 if ('MozWebSocket' in window) {
193 addToLog('Use MozWebSocket');
194 } else if (!('WebSocket' in window)) {
tyoshino@chromium.org6089e1e2011-05-09 09:15:31[diff] [blame]195 addToLog('WebSocket is not available');
196 }
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]197}
198</script>
199</head>
200<body onload="init()">
201
202<form action="#" onsubmit="connect(); return false;">
203<input type="text" id="address" size="40">
204<input type="submit" value="connect">
tyoshino@chromium.orge643cc62011-08-10 09:33:30[diff] [blame]205<input type="button" value="print state" onclick="printState();">
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]206</form>
207
208<textarea id="log" rows="10" cols="40" readonly></textarea>
209
210<form action="#" onsubmit="send(); return false;">
211<input type="text" id="message" size="40">
212<input type="submit" value="send">
213</form>
214
tyoshino@chromium.org3c294ea2012-04-11 10:43:34[diff] [blame]215<form action="#" onsubmit="sendfile(); return false;">
216<input type="file" id="file" size="40">
217<input type="submit" value="send file">
218</form>
219
220<form>
221<input type="radio"
222 name="binarytype"
223 value="blob"
224 onclick="setbinarytype('blob')" checked>blob
225<input type="radio"
226 name="binarytype"
227 value="arraybuffer"
228 onclick="setbinarytype('arraybuffer')">arraybuffer
229</form>
230
231<form>
232<input type="checkbox"
233 name="showtimestamp"
234 value="showtimestamp"
235 onclick="showTimeStamp = this.checked">Show time stamp
236</form>
237
tyoshino@chromium.org91305182011-08-24 03:17:09[diff] [blame]238<form action="#" onsubmit="closeSocket(); return false;">
239Code <input type="text" id="code" size="10">
240Reason <input type="text" id="reason" size="20">
241<input type="submit" value="close">
242</form>
243
tyoshino@chromium.org78056712010-12-16 07:41:26[diff] [blame]244</body>
245</html>